<template>
  <div>
    <div class="select_top">
      <el-input v-model="queryParam" @keyup.native.enter="getsxList" placeholder="请输入指标属性名称" style="width:29%;margin-right:10px"></el-input>
      <el-button @click="getsxList">搜索</el-button>
      <el-button type="primary" style="float:right" @click="showS=true">新增</el-button>
    </div>
    <el-table
      ref="filterTable"
      :data="sxList"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.pname"
        label="属性名称"
      >
      </el-table-column>
      <el-table-column
        prop="hash.type"
        label="填报频率"
      >
      </el-table-column>
      <el-table-column
        prop="hash.day"
        label="截止日期"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="changeSX(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="deleteSX(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增指标属性"
      :visible.sync="showS"
    >
      <el-form labelWidth="140px">
        <el-form-item label="属性名称" class="is-required">
          <el-input v-model="pname" v-validate="'required'" name="属性名称"></el-input>
          <div class="el-form-item__error">{{ errors.first('属性名称') }}</div>
        </el-form-item>
        <el-form-item label="填报频率" class="is-required">
          <el-select v-model="type" placeholder="请选择" style="width:100%" @change="initDate">
            <el-option
              v-for="item in typeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="截止日期" class="is-required">
          <el-date-picker v-if="type=='月'"
            style="width:100%"
            v-model="monthDate"
            type="date"
            placeholder="选择月度日期"
            valueFormat="dd"
            format="dd"
          >
          </el-date-picker>
          <el-date-picker v-else-if="type=='季'"
            style="width:100%"
            v-model="qtrDate"
            type="dates"
            format="MM-dd"
            placeholder="选择季度日期"
            valueFormat="MM-dd"
          >
          </el-date-picker>
          <el-date-picker v-else
            style="width:100%"
            v-model="yearDate"
            type="date"
            placeholder="选择年度日期"
            valueFormat="MM-dd"
            format="MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止日期预览">
          <span style="color:#f60" v-if="yearDate||monthDate||qtrDate">{{sumTime}}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showS = false">取 消</el-button>
        <el-button type="primary" @click="newSX">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改指标属性"
      :visible.sync="showS2"
    >
      <el-form labelWidth="140px" v-loading="loading">
        <el-form-item label="属性名称" class="is-required">
          <el-input v-model="sxData.pname"></el-input>
        </el-form-item>
        <el-form-item label="填报频率" class="is-required">
          <el-select v-model="sxData.type" placeholder="请选择" style="width:100%" @change="initDate">
            <el-option
              v-for="item in typeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="截止日期" class="is-required">
          <el-date-picker v-if="sxData.type=='月'"
            style="width:100%"
            v-model="monthDate"
            type="date"
            placeholder="选择月度日期"
            valueFormat="dd"
            format="dd"
          >
          </el-date-picker>
          <el-date-picker v-else-if="sxData.type=='季'"
            style="width:100%"
            v-model="qtrDate"
            type="dates"
            format="MM-dd"
            placeholder="选择季度日期"
            valueFormat="MM-dd"
          >
          </el-date-picker>
          <el-date-picker v-else
            style="width:100%"
            v-model="yearDate"
            type="date"
            placeholder="选择年度日期"
            valueFormat="MM-dd"
            format="MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止日期预览">
          <span style="color:#f60" v-if="yearDate||monthDate||qtrDate">{{sumTime2}}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showS2 = false">取 消</el-button>
        <el-button type="primary" @click="saveChangeSX">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      showS: false,
      showS2: false,
      loading: true,
      queryParam: '',
      typeoptions: [{
        value: '月',
        label: '月',
      }, {
        value: '季',
        label: '季',
      }, {
        value: '年',
        label: '年',
      }],
      monthDate: '',
      qtrDate: '',
      yearDate: '',
      value1: '',
      value2: '',
      value3: '',
      pname: '',
      type: '月',
      description: '',
      sxList: [],
      sxData: {},
    };
  },
  created() {
    this.getsxList();
  },
  computed: {
    sumTime() {
      const typeVal = this.type;
      if (this.type == '月') {
        return `每${typeVal} ${this.monthDate}号`;
      } else if (this.type == '季') {
        return `每${typeVal} 日期分别为${this.qtrDate}号`;
      }
      return `每${typeVal} ${this.yearDate}号`;
    },
    sumTime2() {
      const typeVal = this.sxData.type;
      if (this.sxData.type == '月') {
        return `每${typeVal} ${this.monthDate}号`;
      } else if (this.sxData.type == '季') {
        return `每${typeVal} 日期分别为${this.qtrDate}号`;
      }
      return `每${typeVal} ${this.yearDate}号`;
    },
  },
  methods: {
    reset() {
      this.pname = '';
      this.monthDate = '';
      this.yearDate = '';
      this.qtrDate = [];
    },
    saveChangeSX() {
      let day2;
      if (this.sxData.type == '月') {
        day2 = this.monthDate;
      } else if (this.sxData.type == '季') {
        day2 = this.qtrDate;
      } else {
        day2 = this.yearDate;
      }
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B72F73D7C6ECBE076708330D434C0106C',
        id: this.sxData.id,
        pname: this.sxData.pname,
        type: this.sxData.type,
        day: day2,
      };
      this.$confirm('确定提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then(() => {
          this.$message({
            type: 'success',
            message: '提交成功!',
          });
          this.showS2 = false;
          this.getsxList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
    changeSX(item) {
      this.showS2 = true;
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BE133DA25EC7F9F14B5D3ABB56224205E',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sxData = ts.d.data.operation1[0].hash;
        this.qtrDate = [];
        if (this.sxData.type == '月') {
          this.monthDate = ts.d.data.operation2[0].hash.day;
        } else if (this.sxData.type == '季') {
          for (let i = 0; i < ts.d.data.operation2.length; i += 1) {
            this.qtrDate.push(ts.d.data.operation2[i].hash.day);
          }
        } else {
          this.yearDate = ts.d.data.operation2[0].hash.day;
        }
        setTimeout(() => {
          this.loading = false;
        }, 100);
      });
      this.showS2 = true;
    },
    newSX() {
      let day;
      if (this.type == '月') {
        day = this.monthDate;
      } else if (this.type == '季') {
        day = this.qtrDate;
      } else {
        day = this.yearDate;
      }
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B80B24611D1DD9B07B5D3ABB56224205E',
            pname: this.pname,
            type: this.type,
            day,
          };
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.showT = false;
              this.getsxList();
              this.showS = false;
              this.reset();
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
    getsxList() {
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BE133DA25EC7F9F14C878125FE067FE5A',
        pname: this.queryParam,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sxList = ts.d.data.operation1;
      });
    },
    initDate() {
      this.yearDate = '';
      this.qtrDate = [];
      this.monthDate = '';
    },
    deleteSX(item) {
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B39D22722CE6E6BFC708330D434C0106C',
        id: item.hash.id,
      };
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getsxList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
  },
};
</script>

<style lang="stylus">
.el-form-item.is-required .el-form-item__label:before
  content: '*'
  color: #f56c6c
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.el-table th>.cell
  text-align center
.el-table .cell
  text-align center
.el-select
  width 14%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
